<template>
  <div class="content">
    <Header title="网络订单" @onClose="back" />
    <div class="main flex-row">
        <!-- 侧边筛选 -->
      <div class="main_left">
        <el-input
          v-model="keyword"
          style="width: 100%; margin-bottom: 10px"
          placeholder="输入订单号搜索单据"
          @change="sreach"
        />
        <el-date-picker
          v-model="select_time"
          type="datetimerange"
          range-separator="到"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          style="width: 100%"
          @change="changeTime"
        />
        <div class="order_status">
          <div class="order_status_header">状态</div>
          <div class="order_status_option flex-row">
            <div
              :class="{
                active: item.active,
                'justify-between flex-row item': true,
              }"
              v-for="(item, index) in order_status"
              :key="index"
              @click="changeActive(index)"
            >
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="order_status">
          <div class="order_status_header">取货方式</div>
          <div class="order_status_option flex-row">
            <div
              :class="{
                active: item.active,
                'justify-between flex-row item': true,
              }"
              v-for="(item, index) in mofd_list"
              :key="index"
              @click="changeMofd(index)"
            >
              <div>{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 主体 -->
      <div class="main_right">
        <div class="card_item" v-for="(item, index) in orderList" :key="index">
          <div class="card_item_header flex-row justify-between">
            <div>订单编号：{{ item.code }}</div>
            <div>下单时间：{{ date(item.createtime, 'MM-dd HH:mm') }}</div>
          </div>
          
          <div class="card_item_body">
            <div
              class="item_body_list flex-row justify-between"
              v-for="(v, k) in item.body"
              :key="k"
            >
              <div class="body_list_left flex-row">
                <div class="label">{{ k + 1 }}</div>
                <div class="barcode">{{ v.barcode }}</div>
                <div class="proname">{{ v.name }}—[{{ v.specifi }}]</div>
                <div class="proname">￥{{ v.price }}</div>
              </div>
              <div class="body_list_right">×{{ v.nums }}</div>
            </div>
            <div class="card_item_mark">
              <div class="item_mark_i">
                取货方式：<span class="text">{{ item.mofd_text }}</span>
              </div>
              <div class="item_mark_i">
                订单备注：<span class="text">{{ item.remark || "无" }}</span>
              </div>
              <div class="item_mark_i">
                收货地址：<span class="text">{{ item.address.name ? item.address.name : "无" }}</span>
              </div>
            </div>
          </div>
          <div class="card_item_foot flex-row justify-between">
            <div class="item_foot_status_success" v-if="item.status == '4'">
              {{ item.status_text }}
            </div>
            <div class="item_foot_status_warn" v-else-if="item.status == '-4'">
                {{ item.status_text }}
            </div>
            <div class="item_foot_status_default" v-else>
              {{ item.status_text }}
            </div>
            <div class="item_foot_right flex-row">
              <!-- <button class="daying"><el-icon class="icon" size="16"><Printer /></el-icon>打印小票</button> -->
              <button class="hand" v-if="item.status == '1'" @click="handle(item.id,item.code)">
                <el-icon class="icon" size="16"><Van /></el-icon>发货
              </button>
            </div>
          </div>
        </div>
        <div class="null_status" v-if="orderList.length == 0">
            <el-icon class="icon" size="18"><InfoFilled /></el-icon>
            抱歉，当前没有匹配的订单!
        </div>
      </div>
    </div>
    <!-- 弹出框 -->
    <el-dialog
    v-model="centerDialogVisible"
    title="确认发货"
    width="500"
    align-center
  >
    <span>是否确认已发货</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="shipment()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>
<script setup>
import { onBeforeMount, reactive, ref } from "vue";
import { ElNotification } from 'element-plus';
import Header from "../components/common/header.vue";
import { useRouter } from "vue-router";
import json from "@/assets/js/json.js";
import http from "@/api/index.js";
import { date } from "@/utils/plugs.js";

const router = useRouter();
const select_time = ref([
  new Date().setDate(new Date().getDate() - 1),
  Date.now(),
]);
const order_status = ref(json.orderstatus);
const mofd_list = ref(json.mofd);
const orderList = ref([]);
const centerDialogVisible = ref(false)

// 查询字段
const keyword = ref("");
const startTime = ref(Math.floor(select_time.value[0] / 1000));
const endTime = ref(Math.floor(select_time.value[1] / 1000));
const status = ref("");
const mofd = ref("")

// 操作字段
const orderid = ref(0);
const code = ref("");


// 返回
const back = () => {
  router.back();
};
// 搜索
const sreach = ()=>{
    getOrderList()
}
// 选择时间范围
const changeTime = (value) => {
  startTime.value = Math.floor(value[0].getTime() / 1000);
  endTime.value = Math.floor(value[1].getTime() / 1000);
  getOrderList()
};
// 订单状态选择
const changeActive = (ind) => {
  order_status.value[ind].active = !order_status.value[ind].active;
  
  getstatus();
  getOrderList();
};
// 获取订单状态字符
const getstatus = ()=>{
    let statusList = order_status.value;
    let arr = [];
    statusList.forEach((item) => {
        if (item.active) {
            arr.push(item.status);
        }
    });
    const status_list = arr.join(",");
    status.value = status_list;
}
// 取货方式选择
const changeMofd = (ind) => {
    mofd_list.value[ind].active = !mofd_list.value[ind].active;
    getMofd();
    getOrderList()
};
// 获取取货方式字符
const getMofd = ()=>{
    const mofdList = mofd_list.value;
    let arr = [];
    mofdList.forEach(item => {
        if(item.active){
            arr.push(item.status)
        }
    })
    const str = arr.join(',');
    mofd.value = str;
}

const handle = (id,ordercode)=>{
  orderid.value = id;
  code.value = ordercode;
  centerDialogVisible.value = true
}
// 发货
const shipment = async() => {
  centerDialogVisible.value = false
  var params = {
    orderid:orderid.value,
    code:code.value,
    status:'2'
  }
  var result = await http.shipment({params})
  if(result.data.status){
    ElNotification({
      title:'成功',
      message:result.data.message,
      type:'success'
    })
    getOrderList()
  }else{
    ElNotification({
      title:'失败',
      message:result.data.message,
      type:'warning'
    })
  }
};

const getOrderList = async () => {
  var params = {
    keyword: keyword.value,
    startTime: startTime.value,
    endTime: endTime.value,
    status: status.value,
    mofd: mofd.value,
  };
//   console.log(params)
  var result = await http.orderlist({params});
  if(result.data.status){
      var order_list = result.data.data;
      order_list.forEach(item => {
          item.body = JSON.parse(item.body);
      });
      orderList.value = order_list
  }else{
    orderList.value = []
  }

//   console.log(result.data);
};
onBeforeMount(() => {
  getMofd();
  getstatus();
  getOrderList();
});
</script>
<style scoped>
@import "@/assets/css/common.css";
@import "@/assets/css/order/onlineorder.css";
</style>